<template>
    <div class="artdomain">
        <div class="title">{{ ES_92 }}</div>
        <a-table
            :columns="columns"
            :data-source="domainData"
            :pagination="false"
            :scroll="scrollComp"
            bordered
            :style="{ minHeight: minHeight + 'px' }"
            size="middle"
            :loading="tableLoading"
            :row-class-name="(_record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
        />
    </div>
</template>

<script setup lang="ts" name="artdomain">
    import { getEsDomainsApi } from "@/api/esArticle";
    import { message } from "ant-design-vue";
    import { useCommonColumn, useScrollxy } from "@/hooks/useEsArticleCommon";
    import { ES } from "@/http/host";
    import { esHandleObj } from "@/utils/common";
    const { minHeight, scrollComp } = useScrollxy();
    const tableLoading = ref(false);
    const ES_92 = ES[0];
    const domainData = ref([]);
    const columns = [
        {
            title: "文章索引",
            key: "index",
            dataIndex: "index"
        },
        {
            title: "domain",
            key: "key",
            dataIndex: "key"
        },
        ...useCommonColumn()
    ];

    onMounted(() => {
        tableLoading.value = true;
        getDomainInfo();
    });
    const getDomainInfo = async () => {
        const result = await getEsDomainsApi();
        if (result.data.code === 200) {
            // @ts-ignore
            domainData.value = esHandleObj(result.data.data).splice(0, 10);
        } else {
            message.error("获取失败!");
        }
        tableLoading.value = false;
    };
</script>
<style lang="scss">
    .artdomain {
        min-width: 1300px;
        .title {
            margin: 15px 0;
            font-size: 20px;
            text-align: center;
        }
    }
</style>
